<template>
  <!--  <div class="nav_header">-->
  <div class="header">
    <div class="logo">
      <img src="@/assets/img/logo1.png" />
    </div>
    <div class="top_nav">
      <!--        background-color="#000"-->
      <!--        text-color="#fff"-->
      <!--        active-text-color="#ffd04b"-->
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#fff"
        text-color="#909399"
        active-text-color="#2e82ff"
        :router="true"
      >
        <MenuTree :menuList="userInfo.menu"></MenuTree>
      </el-menu>
    </div>
    <div class="top_right">
      <i class="el-icon-rank" @click="buttoncli"></i>
      <i class="el-icon-bell"></i>
      <span
        slot="title"
        class="title-text"
        style="margin-left: 10px"
        v-if="userInfo.userInfo.company_name"
        >{{ userInfo.userInfo.company_name }}</span
      >
      <span style="margin: 0 10px" class="title-right">|</span>
      <span>{{ userInfo.userInfo.username }}</span>
      <span class="user_avatar">
        <i class="el-icon-user"></i>
      </span>
      <el-dropdown size="mini" placement="top">
        <span class="el-dropdown-link"
          ><i
            class="el-icon-arrow-down el-icon--right"
            style="color: #909399"
          ></i
        ></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-edit-outline"
            >修改密码
          </el-dropdown-item>
          <!--          <el-dropdown-item icon="el-icon-sort">切换语言</el-dropdown-item>-->
          <el-dropdown-item @click.native="exit" icon="el-icon-warning-outline"
            >退出
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
  <!--  </div>-->
</template>
<script>
import { mapActions, mapMutations, mapState } from "vuex";
import MenuTree from "./MenuTree.vue";
import screenfull from "screenfull";
import router from "@/router";
import { unbindMembeId } from "@/api";
import { getClientId } from "@/utils/auth";

export default {
  components: {
    MenuTree,
  },
  data() {
    return {
      isFullscreen: false,
      userInfo: this.$store.getters,
      selMenuData: {},
      defaultProps: {
        children: "children",
        label: "title",
        index: "path",
      },
    };
  },
  computed: {
    ...mapState("user", {
      ws: (state) => state.ws,
    }),
  },
  methods: {
    ...mapMutations("user", [
      "delToken",
      "removeUserInfo",
      "removeMenu",
      "delClientId",
    ]),
    buttoncli() {
      if (!screenfull.enabled) {
        // 如果不允许进入全屏，发出不允许提示
        this.$message({
          message: "不支持全屏",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
    async exit() {
      await unbindMembeId({ client_id: getClientId().client_id });
      this.delToken();
      this.removeUserInfo();
      this.removeMenu();
      this.delClientId();
      this.$store.commit("tags/clearTags");
      router.push("/login");
    },
  },
};
</script>
<style lang="scss" scoped>
//.nav_header {
//
//  width: 100%;

.header {
  height: 62px;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 1300px;
  max-width: 2560px;
  position: fixed;
  //z-index: 998;
  //height: 62px;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  border-bottom: 1px solid #eee;
  background-color: #fff;

  .el-menu-demo {
    ::v-deep .el-submenu__title {
      .el-icon-arrow-down {
        display: none;
      }
    }
  }

  .logo {
    width: 200px;
    //flex: 1;
    text-align: left;
    margin-right: 40px;

    img {
      width: 147px;
      height: 40px;
      margin-left: 25px;
    }
  }

  .top_right {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    color: #909399;

    .user_avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #909399;
      width: 32px;
      height: 32px;
      margin: 0 20px;
      border: #909399 solid 1px;
      border-radius: 50%;
      text-align: center;
    }

    .el-icon-bell {
      font-size: 18px;
    }

    .el-icon-rank {
      font-size: 18px;
      margin-right: 15px;
    }
  }
}

//}

::v-deep .el-menu .el-menu--horizontal {
  border-bottom: none;
  font-size: 16px;
}

::v-deep .el-submenu__title {
  font-size: 16px;
}

::v-deep .el-menu-item {
  font-size: 16px;
}

::v-deep .el-menu.el-menu--horizontal {
  border-bottom: none;
}
</style>
